<template>
  <div class="comp">
    <div class="sub-title">平台基础属性</div>

    <div class="sub-form">

      <!-- <el-form label-position="right" label-suffix="：" :label-width="formLabelWidth">
        <el-form-item label="商品分类">
          <span>{{ propertyObj.thirdCategoryLabel }}</span>
        </el-form-item>
      </el-form> -->

      <!-- 抖音商品属性 -->
      <dou-yin-goods-property v-if="propertyObj.platformType === 1" 
        ref="douYinPropertyRef"
        :propertyObj="propertyObj" 
        :formLabelWidth="formLabelWidth"
      >
      </dou-yin-goods-property>

      <!-- 快手属性 -->
      <kuai-shou-goods-property v-else-if="propertyObj.platformType === 2" 
        ref="kuaiShouPropertyRef"
        :propertyObj="propertyObj" 
        :formLabelWidth="formLabelWidth"
      >
      </kuai-shou-goods-property>

      <!-- 拼多多属性 -->
      <pdd-goods-property v-else-if="propertyObj.platformType === 4" 
        ref="pddPropertyRef"
        :propertyObj="propertyObj" 
        :formLabelWidth="formLabelWidth"
      >
      </pdd-goods-property>

      <div v-else>
        <span>{{ '无' }}</span>
      </div>

    </div>

  </div>
</template>

<script>
  import douYinGoodsProperty from './dou-yin-goods-property'
  import kuaiShouGoodsProperty from './kuai-shou-goods-property'
  import pddGoodsProperty from './pdd-goods-property'

  export default {
    components: {
      douYinGoodsProperty,
      kuaiShouGoodsProperty,
      pddGoodsProperty
    },
    props: {
      // 商品属性对象
      propertyObj: {
        type: Object
      },
      formLabelWidth: {
        type: String
      }
    },
    data() {
      return {
        activeTab: 'goodsProperty',
        refMap: {
          1: 'douYinPropertyRef',
          2: 'kuaiShouPropertyRef',
          4: 'pddPropertyRef'
        }
      }
    },
    created() {
    },
    methods: {
      // 表单校验 true：成功 false：失败
      checkForm() {
        let ret = true
        const refArrays = []
        refArrays.push(this.refMap[this.propertyObj.platformType])
        // 表单校验
        const checkFailArrays = []
        refArrays.forEach(refKey => {
          const res = this.$refs[refKey].checkForm()
          if (!res) {
            checkFailArrays.push(refKey)
          }
        })
        if (checkFailArrays.length > 0) {
          ret = false
        }
        return ret
      },
      // 提交表单
      submitForm() {
        const refArrays = []
        refArrays.push(this.refMap[this.propertyObj.platformType])

        // 表单组装
        const finalSubmitForm = {}
        refArrays.forEach(refKey => {
          const submitForm = this.$refs[refKey].submitForm()
          Object.assign(finalSubmitForm, submitForm)
        })
        console.log('goodsProperty success', finalSubmitForm)
        return finalSubmitForm
      }
    }
  }
</script>

<style lang="less" scoped>

</style>